<template>
  <card-layout title="预警统计" class="early-warning-statistics" bg="2">
    <template #extra>
      <!-- <div class="more-div" title="关闭" @click="$emit('close')"><el-icon :size="18"><Close /></el-icon></div> -->
       <el-button type="primary" size="small" @click="$emit('closeWarning',3)"><el-icon><SwitchButton /></el-icon>&nbsp; 关闭</el-button>
    </template>
    <div class="content-container">
      <div class="charts-container">
        <!-- 柱状图 -->
        <div class="chart-box">
          <div id="barChartRef" class="chart"></div>
        </div>
        <!-- 饼图 -->
        <div class="chart-box">
          <div id="pieChartRef" class="chart"></div>
        </div>
      </div>
      <!-- 筛选区域 -->
      <div class="filter-container">
        <div class="filter-row">
          <el-select style="width: 100px" v-model="riskType" placeholder="风险种类" class="filter-item">
            <el-option label="全部风险" value="all"></el-option>
            <el-option label="卫星查看风险" value="卫星查看风险"></el-option>
            <el-option label="无人机详查风险" value="无人机详查风险"></el-option>
          </el-select>

          <el-select style="width: 100px" v-model="riskLevel" placeholder="风险等级" class="filter-item">
            <el-option label="重大风险" value="重大风险"></el-option>
            <el-option label="较大风险" value="较大风险"></el-option>
            <el-option label="一般风险" value="一般风险"></el-option>
            <el-option label="低风险" value="低风险"></el-option>
          </el-select>

          <el-input style="width: 100px" v-model="riskName" placeholder="风险名称" class="filter-item"></el-input>
          
          <el-date-picker
            style="width: 220px"
            v-model="dateRange"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD"
            class="date-range-picker"
          />
          
          <el-button type="success" @click="handleSearch" class="search-btn">
            <el-icon><Search /></el-icon>
            查询
          </el-button>
        </div>
      </div>
      <!-- 表格区域 -->
      <div class="table-container">
        <el-table :data="tableData" style="width: 100%" :header-cell-style="headerCellStyle" border>
          <el-table-column prop="deviceType" label="设备类型" align="center" ></el-table-column>
          <el-table-column prop="deviceName" label="设备名称" align="center" width="180"></el-table-column>
          <el-table-column prop="warningLevel" label="预警等级" align="center" >
            <template #default="scope">
              <span :class="`warning-level-${scope.row.warningLevelKey}`">{{ scope.row.warningLevel }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="warningTime" label="预警时间" align="center" width="180"></el-table-column>
          <el-table-column label="操作" align="center" >
            <template #default>
              <div class="operation-btns">
                <el-button type="primary" size="small" circle>
                  <el-icon><View /></el-icon>
                </el-button>
                <el-button type="primary" size="small" circle>
                  <el-icon><ChatDotRound /></el-icon>
                </el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="100"
            :current-page="currentPage"
            @current-change="handlePageChange"
          />
        </div>
      </div>
    </div>
  </card-layout>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick } from 'vue';
import * as echarts from 'echarts';
import { Search, Close, View, ChatDotRound } from '@element-plus/icons-vue';
import useChart from '@/hooks/useCharts';
import CardLayout from '@/layouts/CardLayout.vue';
// 筛选条件
const deviceType = ref('all');
const warningLevel = ref('red');
const deviceName = ref('');
const dateRange = ref([]);
const currentPage = ref(1);

// 图表引用
let barChart;
let pieChart;

let pieOption = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'horizontal',
    top: '0px',
    left: 'center',
    itemWidth: 20,
    itemHeight: 10,
    textStyle: { //图例文字的样式
      color: '#eef1fa',
      fontSize: 14
    }
  },
  series: [
    {
      name: '预警统计',
      type: 'pie',
      radius: '70%',
      center: ['50%', '60%'],
      labelLine: {
        show: true
      },
      label: {
        normal: {
          show: true,
          position: 'outside',
          fontSize: 12,
          color: '#eef1fa',
        },
      },
      data: [
        { value: 120, name: 'gnss预警', itemStyle: { color: '#FF9640' } },
        { value: 80, name: '环境监测预警', itemStyle: { color: '#FFCF40' } }
      ],
    }
  ]
};
let barOption = {
  grid: {
    left: '5px',    // 左边距为0
    right: '5px',   // 右边距为0
    top: '30px',     // 上边距为0
    bottom: '0px',  // 下边距为0
    containLabel: true // 确保标签不会被遮挡
  },
  legend: {
    itemWidth: 20,
    itemHeight: 10,
    textStyle: { //图例文字的样式
      color: '#eef1fa',
      fontSize: 12
    }
  },
  xAxis: {
    type: 'category',
    data: ['红色预警', '橙色预警', '黄色预警', '蓝色预警'],
    axisLabel: {
      margin: 10,
      fontSize: 12,
      width: 60,
      color: "#eef1fa",
      interval: 0,
      overflow: "breakAll",
    },
    axisLine: {
      lineStyle: {
        color: "rgba(82, 149, 100, 1)",
      },
    },
    axisTick: { show: false },
  },
  yAxis: {
    type: 'value',
    name: '单位：次',
    nameTextStyle: {
      fontSize: 12,
      color: "#eef1fa",
    },
    axisLabel: {
      fontSize: 12,
      color: "#eef1fa",
    },
    splitLine: {
      lineStyle: {
        color: "rgba(82, 149, 100, 0.7)",
        type: "dashed",
      },
    },
    axisLine: {
      show: false,
      lineStyle: {
        color: "rgba(82, 149, 100, 1)",
      },
    },
  },
  series: [
    {
      name: 'GNSS预警',
      type: 'bar',
      label: {
        show: true,
        color: '#fff',
        position: 'top',
        fontSize: 10
      },
      itemStyle: {
        color: '#FF9640'
      },
      data: [100, 50, 100, 30]
    },
    {
      name: '环境预警',
      type: 'bar',
      label: {
        show: true,
        color: '#fff',
        position: 'top',
        fontSize: 10
      },
      itemStyle: {
        color: '#FFCF40'
      },
      data: [120, 80, 150, 60]
    }
  ]
};
// 表格数据
const tableData = ref([
  {
    deviceType: 'GNSS',
    deviceName: 'gnss-采场-01',
    warningLevel: '红色预警',
    warningLevelKey: 'red',
    warningTime: '2025-05-02 11:11:10'
  },
  {
    deviceType: 'GNSS',
    deviceName: 'gnss-采场-02',
    warningLevel: '橙色预警',
    warningLevelKey: 'orange',
    warningTime: '2025-05-02 11:11:10'
  },
  {
    deviceType: 'GNSS',
    deviceName: 'gnss-采场-03',
    warningLevel: '黄色预警',
    warningLevelKey: 'yellow',
    warningTime: '2025-05-02 11:11:10'
  },
  {
    deviceType: 'GNSS',
    deviceName: 'gnss-采场-04',
    warningLevel: '蓝色预警',
    warningLevelKey: 'blue',
    warningTime: '2025-05-02 11:11:10'
  },
  {
    deviceType: 'GNSS',
    deviceName: 'gnss-边坡-01',
    warningLevel: '红色预警',
    warningLevelKey: 'red',
    warningTime: '2025-05-02 10:30:15'
  },
  {
    deviceType: 'GNSS',
    deviceName: 'gnss-边坡-02',
    warningLevel: '黄色预警',
    warningLevelKey: 'yellow',
    warningTime: '2025-05-02 09:45:22'
  },
  {
    deviceType: 'GNSS',
    deviceName: 'gnss-边坡-03',
    warningLevel: '橙色预警',
    warningLevelKey: 'orange',
    warningTime: '2025-05-02 08:20:05'
  }
]);

// 表格头部样式
const headerCellStyle = {
  background: '#0a2e5c',
  color: '#fff',
  fontWeight: 'bold',
  borderColor: '#164b87'
};

// 搜索处理
const handleSearch = () => {
  const [startDate, endDate] = dateRange.value || [null, null];
  console.log('搜索条件:', {
    deviceType: deviceType.value,
    warningLevel: warningLevel.value,
    deviceName: deviceName.value,
    startDate,
    endDate
  });
  // 这里可以添加实际的搜索逻辑
};

// 分页处理
const handlePageChange = (page) => {
  currentPage.value = page;
  // 这里可以添加分页加载数据的逻辑
};

onMounted(() => {
  console.log("zoule")
  // 初始化图表
  nextTick(()=>{
    barChart = echarts.init(document.getElementById("barChartRef"), null, {locale: 'ZH'});
    pieChart = echarts.init(document.getElementById("pieChartRef"), null, {locale: 'ZH'});
    barChart.setOption(barOption, true)
    pieChart.setOption(pieOption, true)
  })
});
</script>

<style lang="scss" scoped>
.early-warning-statistics {
  box-sizing: border-box;
  width: 100%;
  min-width: 800px;
  color: #fff;
  
  .more-div {
    color: #bbcfff;
    cursor: pointer;
  }
  
  .more-div:active {
    scale: 0.8;
  }
  
  .content-container {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
    height: calc(100% - 44px);
    overflow: hidden;
    .charts-container {
      display: flex;
      height: 250px;
      gap: 5px;
      padding: 5px 8px;
      .chart-box {
        flex: 1;
        // background-color: rgba(16, 65, 125, 0.3);
        // border: 1px solid rgba(31, 198, 255, 0.3);
        border-radius: 4px;
        padding: 8px;

        .chart {
          width: 100%;
          height: 100%;
        }
      }
    }

    .filter-container {
      display: flex;
      flex-direction: column;
      border-radius: 4px;
      padding: 0px 10px 0px 8px;
      .filter-row {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
      }

      .filter-item {
        // 宽度通过内联样式控制
      }

      .date-range {
        display: flex;
        align-items: center;
      }

      .date-picker {
        // 宽度通过内联样式控制
      }

      .search-btn {
        margin-left: auto;
      }
    }

    .table-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      border-radius: 4px;
      padding: 5px 10px 5px 8px;
      overflow: hidden;

      .warning-level-red {
        color: #ff6b6b;
        font-weight: bold;
      }

      .warning-level-orange {
        color: #ff9f43;
        font-weight: bold;
      }

      .warning-level-yellow {
        color: #feca57;
        font-weight: bold;
      }

      .warning-level-blue {
        color: #54a0ff;
        font-weight: bold;
      }

      .operation-btns {
        display: flex;
        justify-content: center;
        gap: 8px;
      }

      .pagination {
        margin: 15px 0px;
        display: flex;
        justify-content: center;
      }
    }
  }
}


:deep(.header) {
  background-position: left !important;
    background-size: contain !important;
}


// 覆盖 Element Plus 样式
:deep(.el-table) {
  background-color: transparent;
  color: #fff;
  height: 2rem;

  th.el-table__cell {
    background-color: #0a2e5c;
  }

  td.el-table__cell {
    background-color: rgba(16, 65, 125, 0.3);
    border-color: rgba(31, 198, 255, 0.3);
  }

  tr:hover > td.el-table__cell {
    background-color: rgba(22, 75, 135, 0.5) !important;
  }
}

:deep(.el-pagination) {
  --el-pagination-bg-color: rgba(16, 65, 125, 0.5);
  --el-pagination-text-color: #fff;
  --el-pagination-button-color: #fff;
  --el-pagination-hover-color: #409eff;
}

:deep(.el-input__wrapper),
:deep(.el-select .el-input__wrapper) {
  background-color: rgba(16, 65, 125, 0.3);
  box-shadow: 0 0 0 1px rgba(31, 198, 255, 0.3) inset;
}

:deep(.el-input__inner) {
  color: #fff;
}

:deep(.el-select-dropdown__item) {
  color: #fff;
}

:deep(.el-select-dropdown) {
  background-color: #0a2e5c;
  border: 1px solid rgba(31, 198, 255, 0.3);
}

:deep(.el-select-dropdown__item.hover),
:deep(.el-select-dropdown__item:hover) {
  background-color: rgba(22, 75, 135, 0.5);
}

:deep(.el-date-editor) {
  --el-datepicker-border-color: rgba(31, 198, 255, 0.3);
  --el-datepicker-text-color: #fff;
  --el-datepicker-inner-border-color: rgba(31, 198, 255, 0.3);
  --el-datepicker-off-text-color: #888;
  --el-datepicker-header-text-color: #fff;
}
</style>